<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 如果要在移动端展示web页面，那就要在元标签（meta）中设置视口缩放比例-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>爱V猫友情链接</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				text-decoration: none;
				list-style: none;
			}
			
			/* 页面顶部 */
			.top{
				/* 弹性盒子 */
				display: flex;
				width: 60%;
				margin: 0 auto;
			}
			/* 登录的样式 */
			.top .login{
				/* 放大元素 */
				flex-grow: 1;
				/* 弹性盒子 */
				display: flex;
				/* 水平对齐方式--居右 */
				justify-content: flex-end;
				/* 垂直对齐方式 */
				align-items: center;
			}
			/* 登录的a标签 */
			.top .login a{
				color: black;
				margin-left: 30px;
			}
			
			
			/* 主体部分 */
			.main{
				background-color: aqua;
				/* 弹性盒子 */
				display: flex;
				/* 水平居中 */
				justify-content: center;
			}
			.main > div{
				width: 65%;
				/* 弹性盒子 */
				display: flex;
				margin: 8px;
			}
			/* 左侧菜单 */
			.main .left{
				width: 200px;
				background-color: #999;
				padding-top: 30px;
			}
			.main .left a{
				color: #000;
				/* 行内块---可以设置宽高 */
				display: inline-block;
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
			.main .left a:hover{
				background-color: red;
				color: #fff;
			}
			
			/* 右侧友情链接 */
			.main .right{
				background-color: #fff;
				/* 设置项目缩放 */
				flex: 1;
				padding: 30px;
			}
			.main .right h1{
				color: #999;
				border-bottom: 1px solid #999;
				padding-bottom: 20px;
			}
			
			/* 图片列表 */
			.main .right ul{
				margin-top: 10px;
				/* 弹性盒子 */
				display: flex;
				/* 自动换行 */
				flex-wrap: wrap;
				/* 水平对齐方式 */
				justify-content: space-between;
				padding: 0 20px;
			}
			
			.main .right ul li{
				border: 1px solid #999;
				margin-bottom: 25px;
			}
		</style>
	</head>
	<body>
		<div class="top">
			<div>
				<img src="./img/logo.jpg" alt="">
			</div>
			<div class="login">
				<a href="">登录</a><a href="">注册</a>
			</div>
		</div>
		<div class="main">
			<div>
				<ul class="left">
					<li><a href="">公司简介</a></li>
					<li><a href="">公司简介</a></li>
					<li><a href="">公司简介</a></li>
					<li><a href="">公司简介</a></li>
					<li><a href="">公司简介</a></li>
					<li><a href="">公司简介</a></li>
					<li><a href="">公司简介</a></li>
					<li><a href="">公司简介</a></li>
					<li><a href="">公司简介</a></li>
					<li><a href="">公司简介</a></li>
					<li><a href="">公司简介</a></li>
				</ul>
				<div class="right">
					<h1>友情链接</h1>
					<ul>
						<li><img src="./img/lk_logo01.jpg" alt=""></li>
						<li><img src="./img/lk_logo02.jpg" alt=""></li>
						<li><img src="./img/lk_logo03.jpg" alt=""></li>
						<li><img src="./img/lk_logo04.jpg" alt=""></li>
						<li><img src="./img/lk_logo05.jpg" alt=""></li>
						<li><img src="./img/lk_logo06.jpg" alt=""></li>
						<li><img src="./img/lk_logo07.jpg" alt=""></li>
						<li><img src="./img/lk_logo08.jpg" alt=""></li>
						<li><img src="./img/lk_logo09.jpg" alt=""></li>
						
					</ul>
				</div>
			</div>
		</div>
		<div class="bottom">底部</div>
		
	</body>
</html>